<!-- 新闻详情 -->
<template>
	<view class="NewsDetail">
		<u-navbar bgColor="#7bb7fd" :placeholder="true" :autoBack="true" leftIconColor="#fff" leftText="返回" leftIconSize="30rpx">
			<view class="nav-center-slot" slot="center">新闻详情</view>
		</u-navbar>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
			<!-- 新闻内容 -->
			<view class="box">
				<!-- 标题 -->
				<view class="title">{{ newsinfo.title }}</view>
				<!-- 时间 -->
				<view class="time">
					{{ newsinfo.time }}
					<span>{{ newsinfo.src }}</span>
				</view>
				<!-- 内容 -->
				<u-parse class="container" :content="newsinfo.content" v-if="newsinfo.content"></u-parse>
			</view>
		</scroll-view>
		<!-- 置顶按钮 -->
		<xrzp-Istop :goTop="goTop" :toTopShow='toTopShow' style="bottom: 60rpx;"></xrzp-Istop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			newsinfo: '',
			scrollTop: 0,
			toTopShow: false,
			old: {
				scrollTop: 0
			},
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			this.newsinfo = uni.getStorageSync('newsinfo');
		},
		// 滚动事件
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
			this.toTopShow = this.old.scrollTop >= 300
		},
		goTop() {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.NewsDetail {
	background-color: #f6f6f6;
	.nav-center-slot {
		font-size: 34rpx;
		font-weight: bold;
	}
	uni-scroll-view {
		width: 100%;
		height: calc(100vh - 100rpx);
	}
	.box {
		box-sizing: border-box;
		padding: 20rpx;
		.title {
			text-align: justify;
			font-size: 36rpx;
			font-weight: 700;
			padding: 0 0 0.2rem;
			color: #404040;
		}
		.time {
			font-size: 20rpx;
			font-weight: 700;
			padding: 0 0 0.2rem;
			color: #404040;
			span {
				margin-left: 20rpx;
			}
		}
		.container {
			text-align: justify;
			width: 100%;
			max-width: 100%;
			overflow: hidden;
			::v-deep view[sax-type='proxy'] {
				display: none;
			}
			::v-deep video {
				max-width: 100%;
			}
			::v-deep img {
				max-width: 100%;
			}
			::v-deep b {
				font-size: 28rpx;
			}
			::v-deep h2 {
				font-size: 28rpx;
			}
			::v-deep strong {
				font-size: 28rpx;
			}
			::v-deep figure {
				margin: 0;
			}
			::v-deep p {
				margin: 0.6rem 0;
				text-indent: 2em;
			}
		}
	}
}
</style>
